<template>
  <div id="userRegisterPage">
    <h2 class="title">应用生成 - 用户注册</h2>
    <div class="desc">不写一行代码，生成完整应用</div>
    <a-form :model="formState" name="basic" autocomplete="off" @finish="handleSubmit">
      <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
        <a-input v-model:value="formState.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item
        name="userPassword"
        :rules="[
          { required: true, message: '请输入密码' },
          { min: 8, message: '密码不能小于 8 位' },
        ]"
      >
        <a-input-password v-model:value="formState.userPassword" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item
        name="checkPassword"
        :rules="[
          { required: true, message: '请确认密码' },
          { min: 8, message: '密码不能小于 8 位' },
          { validator: validateCheckPassword },
        ]"
      >
        <a-input-password v-model:value="formState.checkPassword" placeholder="请确认密码" />
      </a-form-item>
      <div class="tips">
        已有账号？
        <RouterLink to="/user/login">去登录</RouterLink>
      </div>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%" class="login-button">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { register } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import { reactive } from 'vue'

const router = useRouter()

const formState = reactive<API.UserRegisterRequest>({
  userAccount: '',
  userPassword: '',
  checkPassword: ''
})

/**
 * 验证确认密码
 * @param rule
 * @param value
 * @param callback
 */
const validateCheckPassword = (rule: unknown, value: string, callback: (error?: Error) => void) => {
  if (value && value !== formState.userPassword) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: API.UserRegisterRequest) => {
  const res = await register(values)
  // 注册成功，跳转到登录页面
  if (res.data.code === 0) {
    message.success('注册成功')
    router.push({
      path: '/user/login',
      replace: true
    })
  } else {
    message.error('注册失败，' + res.data.message)
  }
}
</script>

<style scoped>
#userRegisterPage {
  max-width: 400px;
  margin: 0 auto;
  padding: 70px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
}

/* 页面背景设置为深色以便展示半透明效果 */
body {
  background: linear-gradient(135deg, #1a2a6c, #2c3e50);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* 添加科技感背景元素 */
#userRegisterPage::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);

  z-index: -1;
}

/* 标题科技感样式 */
.title {
  text-align: center;
  margin-bottom: 16px;
  color: #0964ec;
  text-shadow: 0 0 10px rgb(84, 132, 228);
  font-weight: 300;
  letter-spacing: 2px;
}

/* 描述文字科技感样式 */
.desc {
  text-align: center;
  color: #88d0ff;
  margin-bottom: 16px;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(100, 200, 255, 0.5);
}

/* 按钮科技感样式 */
.login-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(90deg, #0066ff, #00ccff);
  border: none;
  border-radius: 4px;
  color: white;
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.login-button:hover {
  background: linear-gradient(90deg, #00ccff, #0066ff);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.7);
  transform: translateY(-2px);
}

/* 提示文字科技感样式 */
.tips {
  margin-bottom: 16px;
  color: #147ec3;
  font-size: 13px;
  text-align: right;
}

.tips a {
  color: #6a7d7e;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tips a:hover {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}
</style>
